<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			textarea,
			pre {
				margin: 0;
				padding: 0;
				outline: 0;
				border: 0;
			}
			
			.expandingArea {
				position: relative;
				border: 1px solid #888;
				background: #fff;
			}
			
			.expandingArea textarea,
			.expandingArea pre {
				padding: 5px;
				background: transparent;
				font: 400 13px/16px helvetica, arial, sans-serif;
				/* Make the text soft-wrap */
				white-space: pre-wrap;
				word-wrap: break-word;
			}
			
			.expandingArea textarea {
				/* The border-box box model is used to allow
       * padding whilst still keeping the overall width
       * at exactly that of the containing element.
       */
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
				/* This height is used when JS is disabled */
				height: 100px;
			}
			
			.expandingArea.active textarea {
				/* Hide any scrollbars */
				overflow: hidden;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				/* Remove WebKit user-resize widget */
				resize: none;
			}
			
			.expandingArea pre {
				display: none;
			}
			
			.expandingArea.active pre {
				display: block;
				/* Hide the text; just using it for sizing */
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		<div class="expandingArea " id="textarea">
			<pre><span></span><br></pre>
			<textarea></textarea>
		</div>
		<script type="text/javascript">
			function makeExpandingArea(container) {
				var area = container.getElementsByTagName('textarea')[0];
				var span = container.getElementsByTagName('span')[0];
				if(area.addEventListener) {
					area.addEventListener('input', function() {
						span.textContent = area.value;
					}, false);
					span.textContent = area.value;
				} else if(area.attachEvent) {
					area.attachEvent('onpropertychange', function() {
						var html = area.value.replace(/\n/g, '<br/>');
						span.innerText = html;
					});
					var html = area.value.replace(/\n/g, '<br/>');
					span.innerText = html;
				}
				if(window.VBArray && window.addEventListener) { //IE9
					area.attachEvent("onkeydown", function() {
						var key = window.event.keyCode;
						if(key == 8 || key == 46) span.textContent = area.value;

					});
					area.attachEvent("oncut", function() {
						span.textContent = area.value;
					}); //处理粘贴
				}
				container.className += "active";
			}

			var areas = document.getElementById('textarea');
			makeExpandingArea(areas);
		</script>
	</body>

</html>